<script setup>
import { useI18n } from 'vue-i18n'
import { useRouter } from 'vue-router'
import { NButton } from 'naive-ui'
import serachInput from '@/components/searchInput/serachInput.vue'
import tipButton from '@/components/customButton/tipButton.vue'
import customUploadPopup from '@/components/customUploadPopup/customUploadPopup.vue'

const { t } = useI18n()
const router = useRouter()

const data = Array.from({ length: 46 }).map((_, index) => ({
  name: `Edward King ${index}`,
  age: 32,
  address: `London, Park Lane no. ${index}`
}))

const goDetail = (row) => {
  router.push({
    path: '/home/device/deviceDetail'
  })
}

const columns = computed(() => {
  return [
    {
      type: 'selection',
      disabled(row) {
        return row.name === 'Edward King 3'
      },
      fixed: 'left'
    },

    {
      title: 'Name',
      key: 'name',
      fixed: 'left'
    },
    {
      title: 'IP',
      key: 'IP'
    },
    {
      title: 'MAC',
      key: 'MAC'
    },
    {
      title: t('system.version'),
      key: 'version'
    },
    {
      title: t('system.model'),
      key: 'model'
    }
  ]
})

const checkedRowKeysRef = ref([])
const handleCheck = (rowKeys) => {
  checkedRowKeysRef.value = rowKeys
}

const valueChange = (keyword) => {
  console.log(keyword)
}

const deleteHandle = () => {
  console.log('点击了删除')
}
</script>

<template>
  <div class="px-4">
    <div class="flex justify-between items-center mb-4 flex-wrap">
      <div class="flex items-center mb-2 md:mb-0">
        <n-button type="primary">{{ t('system.upgrade') }}</n-button>
      </div>
    </div>
    <n-data-table
      :columns="columns"
      :data="data"
      :pagination="{ pageSize: 5 }"
      :row-key="(row) => row.address"
      @update:checked-row-keys="handleCheck"
      :scroll-x="1200"
    />
  </div>
</template>

<style scoped></style>
